<template>
  <div>
    <!-- 头部导航 -->
    <el-row class="top">
      <el-col :span="2"><div class="grid-content" @click="home">网站首页</div></el-col>
      <el-col :span="15"><div class="grid-content" @click="home">鲜花网站</div></el-col>
      <el-col :span="2"><div class="grid-content" @click="goto">退出登录</div></el-col>
      <el-col :span="2"><div class="grid-content">admin</div></el-col>
      <el-col :span="2"><div class="grid-content" @click="shopcart">购物车</div></el-col>
    </el-row>

    <!-- 花店简介 -->
    <div class="aboutus">
      <div class="title">
        <el-divider content-position="center">花店简介</el-divider>
        <p><el-tag>真心花店</el-tag><el-tag>flower</el-tag></p>
      </div>
      <el-card class="box-card" style="margin-bottom: 20px;">
        <div class="text item">
          <el-row :gutter="110">
            <el-col :span="8">
              <div class="grid-content">
                于2022.12月创建<span class="large">真心花店</span>，在乡间幽静，山清水秀，风清云淡的环境下，人们有的骑单车，有的开轿车，有的步行，来来往往的人都会在这里情不自禁的驻足遥望，那片雅致的花海。旁边有一漂亮的女子抱着花，漫天飞舞的花瓣中，伴着音乐微闭着眼。。。。。。。
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                  花店是社会整体生活文化的体现，当人们要表达自己的情感时，人们转向这自然中最美丽的花朵，花朵便成了繁忙的情感使者。它们是花店派发的使者。花店如舞台，集中上演着人间最深切的情感剧！太多的人在这里告诉你，他们要表达什么样的感情和情绪，这些情感让在花店的人不断接触感动、浸润感动。在花店做事，人会变得更加珍惜自然，珍惜情感，珍惜世间最美好的一切。
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                  千姿百态的花儿述说着千言万语，每一句都述说着“美好”，特别是现在。随着人们的生活水平不断地进步，生活质量不断地提高和对生活的追求。鲜花已经是人们生活不可缺少的点缀！
              </div>
            </el-col>
          </el-row>
        </div>
        <div class='topMask square'></div><div class='topMask circular'></div>
      </el-card>
    </div>
</div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: "admin",
  methods:{
    /* 向shop组件跳转 */
    home(){
      this.$router.push('/shop')
    },
    
    /* 退出登录功能 */
    goto(){
      this.$confirm('是否退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        /* 确定退出事件回调 */
        this.$message({
          type: 'success',
          message: '退出成功!',
        });
        this.$router.push('/')
      }).catch(() => {
        /* 取消退出事件回调 */
        this.$message({
          type: 'info',
          message: '取消退出'
        });
      });
    },
    /* 向shopcart跳转 */
    shopcart(){
      this.$router.push('/shopcart')
    },
    
    //方法集合
    ...mapMutations(['changeNum'])
  }
}
</script>


<style scoped>
  .top{
    height: 40px;
    background: #7c7272;
    color: #ffffff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top div{
    cursor: pointer;
  }

.aboutus{
    font-size: 14px;
    text-align: left;
    padding: 0px 100px;
  }
  .intro{
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .text {
    font-size: 14px;
    text-align: left;
    line-height: 30px;
    text-indent: 2em;
  }
  .box-card{
    position: relative;
  }
  .item {
    display: inline-block;
    margin: 30px 50px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .clearfix span{
    color: #fff;
    font-weight: bold;
  }
  .title p{
    color: #8c8888;
    font-size: 15px;
    margin-bottom: 80px;
    text-align: center;
  }
  .grid-content .large{
    font-size: 16px;
    color: #409EFF;
    font-weight: bold;
  }
  .topMask{
    width: 100px;
    height: 100px;
    background-color: rgba(68,138,255,0.2);
    transform: rotate(45deg);
    position: absolute;
  }
  .square{
    border-radius: 5px;
    top: 0px;
  }
  .circular{
    border-radius: 50%;
    top:80px;
    left: 80%;
    background-color: rgba(255, 208, 75,0.2);
  }



</style>



   
